<template>
	<view>
		<view class="box">

			<!-- 头部 -->
			<publicHeader></publicHeader>

			<view class="page_main">

				<view class="pt32 pb32 pl30 pr30">
					<view class="swiper_box">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item>
								<view class="swiper-item">
									<image src="../../static/h5_banner_01.png" class="swiper_img"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<image src="../../static/h5_banner_01.png" class="swiper_img"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<image src="../../static/h5_banner_01.png" class="swiper_img"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="mt45 fs32 lh40 fwb cor_000 tac">Exhibitor List</view>
					<view class="mt32 df aic jcsb">
						<view class="on ex_tags_1">SEND LIST TO MYSELF</view>
						<view class="on ex_tags_1">CLEAR MY LIST</view>
					</view>
				</view>

				<view class="re">
					<view class="content_box">
						<view class="sw_page_list">
							<view class="item_sw" @click="setT(2)">
								EXHIBITORS</view>
							<view class="item_sw on" @click="setT(3)">
								PRODUCTS</view>
						</view>


						<view class="re">

							<view class="mt32">

								<view class="mt24 ex_card_box"  v-for="(item, index) in cp" :key="index">
									{{index}} - {{item.is_delete}}-{{item.checked}}
									<!-- <view class="flex_box">
										<view class="re mr20">
											<view class="card_img">
												<image src="../../static/h5_banner_01.png" class="img_size"
													mode="aspectFit"></image>
											</view>
										</view>
										<view class="item ov">
											<view class="pr25">
												<view class="fs28 lh36 fwb cor_000">{{item.is_delete}}A GRADE PACIFIC
													LIMITED</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000"><text class="fwb">Country/Region :
														</text><text class="">CHINA</text></view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_A90"><text class="fwb">BOOTH NO. :
														</text><text class="">10-N20</text></view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000"><text class="fwb">PRODUCT(S)
															ADDED:</text><text class=""></text></view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000"><text class="fwb">CATEGORIES
															: </text><text class=""> Skincare Products, Personal Care
															Products,Makeup Products</text></view>
												</view>
											</view>
										</view>
									</view> -->
									<!-- <image
										:src=" item.is_delete ? '../../static/icon_checkbox_2.png' : '../../static/icon_checkbox_1.png'"
										class="card_checkbox_pos" @click="handleProductCheckbox(item.id);"></image>
										 -->
										<image
											:src=" item.checked ? '../../static/icon_checkbox_2.png' : '../../static/icon_checkbox_1.png'"
											class="card_checkbox_pos" @click="handleProductCheckbox(index);"></image>
								</view>

							</view>

						</view>


						<!-- <view class="re">
							<view>
								<view class="mt32" v-for="(item, index) in cp" :key="index">

									<view class="mt24 ex_card_box">
										<view class="flex_box">
											<view class="re mr20">
												<view class="card_img">
													<image
														:src="item.picture + '?x-oss-process=image/auto-orient,1/resize,m_lfit,w_350/quality,q_90'"
														style="width: 320rpx;height: 195rpx;" class="img_size"
														mode="aspectFit"></image>
												</view>
											</view>
											<view class="item ov">
												<view class="pr25">
													<view class="fs28 lh36 fwb cor_000 clamp_2" min-height="72rpx">
														{{item.is_delete}}{{item.zhName}}
													</view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000">
														<text class="fwb">SECTORS : </text>
														<text v-if="item.type == 1">COSMETICS</text>
														<text v-if="item.type == 3">PROFESSIONAL BEAUTY</text>
														<text v-if="item.type == 2">SUPPLY CHAIN</text>
														<text v-if="item.type == 4">SERVICES</text>
													</view>

												</view>

												<view class="pt15 pb15 bb5" v-if="item.brandZhName">
													<view class="fs24 lh32 cor_A90">
														<text class="fwb">BRAND : </text>
														<text class="">{{item.brandEnName }}</text>
													</view>
												</view>

												<view class="pt15 pb15 bb5" v-if="item.companyZhName">
													<view class="fs24 lh32 cor_A90">
														<text class="fwb">COMPANY : </text>
														<text class="">{{item.companyEnName }}</text>
													</view>
												</view>

												<view class="pt15 pb15 bb5" v-if="item.areaEnName">
													<view class="fs24 lh32 cor_A90">
														<text class="fwb">REGION/AREA : </text>
														<text class="">{{item.areaEnName }}</text>
													</view>
												</view>

												<view class="pt15 pb15 bb5" v-if="item.categoryEnglishName">
													<view class="fs24 lh32 cor_A90">
														<text class="fwb">CATEGORY : </text>
														<text class="">{{item.categoryEnglishName }}
														</text>
													</view>
												</view>
											</view>


											<image
												:src="item.is_delete ? '../../static/icon_checkbox_2.png' : '../../static/icon_checkbox_1.png'"
												class="card_checkbox_pos" @click="handleProductCheckbox(item.id)">
											</image>
										</view>

									</view>
								</view>
							</view>


							<view v-if="cp.length === 0">
								<u-empty text="NO DATA" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
								</u-empty>
							</view>

						</view> -->


					</view>




				</view>

			</view>

			<!-- footer -->
			<publicFooter></publicFooter>

		</view>
	</view>
</template>

<script>
	import likeMixin from '@/cache/likeMixin';

	export default {
		mixins: [likeMixin],
		data() {
			return {
				dialogVisible: false,
				zhanshangList: [],
				bannerList: [],
				modeIndex: 0,
				CatList: [],
				AreaList: [],
				options: [],
				activityList: [],
				valueThree: '',
				listForm: {
					collectType: 2
				},
				zsList: [],
				cp: [],
				componentKey: 0
			}
		},

		onLoad() {
			this.getLists();
		},

		methods: {
			
			
			handleProductCheckbox(index) {
				let that = this;
				let cp = this.cp;
				cp[index].is_delete = cp[index].is_delete == 1 ? 0 : 1;
				cp[index].checked = cp[index].checked == 1 ? 0 : 1;
				this.cp  = JSON.parse(JSON.stringify(cp))
				
				// this.cp.forEach((item, index) => {
			
				// 	if (item.id == id) {
				// 		that.cp[index].is_delete = item.is_delete == 1 ? 0 : 1;
				// 		that.cp[index].checked = item.checked == 1 ? 0 : 1;
				// 	}
				// })
				console.log(that.cp, 'that.cp[index].is_delete')
			
			},
			
			deleteItem(isDlete, index) {
				this.cp[index].is_delete = isDlete;
				this.componentKey += 1;
				// console.log(isDlete,index)
			},

			setT(t) {
				this.listForm.collectType = t;
				// this.searchList();
				if (t == 2) {
					uni.navigateTo({
						url: '/pages/my_list/exhibitors_list'
					})
				} else if (t == 3) {
					uni.navigateTo({
						url: '/pages/my_list/products_list'
					})
				}
			},


			getLists() {
				let zs = this.getZSList();
				zs.forEach(item => {
					let p = item.logo?.split(",") || [];
					item.logo = p[0] || '';
					item.is_delete = 0;

				})
				this.cp = this.getCPList();
				this.cp.forEach(item => {
					item.is_delete = 0;
					item.checked = 0;
					let p = item.picture?.split(",") || [];
					item.picture = p[0] || '';
				})
				this.zsList = this.transformObjToObj2(zs);

				console.log(this.cp, 'this.cp')
				console.log(this.zsList, 'this.zsList')
			},

			transformObjToObj2(objArray) {
				const groupedByType = {};
				objArray.forEach(item => {
					if (!groupedByType[item.showroom]) {
						groupedByType[item.showroom] = [];
					}
					groupedByType[item.showroom].push(item);
				});
				return Object.keys(groupedByType).map(showroom => ({
					showroom: showroom, // 将字符串类型的type转换为数字
					child: groupedByType[showroom]
				}));
			},

			async convertToPDF() {
				// 捕获当前页面的屏幕截图（包括图片）
				const canvas = await html2canvas(document.querySelector("#product"), {
					allowTaint: false,
					useCORS: true, // 用于解决图片跨域
				});
				const imgData = canvas.toDataURL('image/png');

				// 创建一个新的PDF文件
				const pdf = new jsPDF();

				// 将图片添加到PDF中
				const width = pdf.internal.pageSize.getWidth();
				const height = pdf.internal.pageSize.getHeight();
				pdf.addImage(imgData, 'PNG', 0, 0, width, height);

				// 保存PDF为二进制数据
				const pdfData = pdf.output('arraybuffer');
				pdf.save('converted.pdf');
				// 创建FormData对象并添加PDF数据
				const formData = new FormData();
				formData.append('pdf', new Blob([pdfData]), 'generated.pdf');

				//
			},

			deleteSelect() {

				let ids = [];
				if (this.listForm.collectType == 2) {
					this.zsList.forEach(i => {
						i.child.forEach(item => {
							if (item.is_delete == 1) {
								ids.push(item.id)
							}
						})
					})
				} else {
					this.cp.forEach(item => {
						if (item.is_delete == 1) {
							ids.push(item.id)
						}
					})
				}

				if (ids.length <= 0) {
					// this.$message.error("")
					return false;
				}

				this.$confirm('Are you sure you want to delete the selected?', 'tip', {
					confirmButtonText: 'yes',
					cancelButtonText: 'cancel',
					type: 'warning'
				}).then(() => {
					this.loading = true;
					if (this.listForm.collectType == 2) {
						this.zsDelete(ids);
					} else {
						this.cpDelete(ids);
					}
					window.location.reload();


				}).catch(() => {
					// this.$message({
					//   type: 'info',
					//   message: '已取消删除'
					// });
				});


			},


			handleAll(flag) {
				if (this.listForm.collectType == 2) {
					this.zsList.forEach((item, index) => {
						item.child.forEach((i, k) => {
							i.is_delete = flag;
						})
						console.log(1);
					});
				} else {
					this.cp.forEach((item, index) => {
						item.is_delete = flag;
						this.cp[index].is_delete = flag;
					});
				}

				this.componentKey += 1;
			},

			handleCurrentChange(page) {
				this.listForm.currentPage = page;
				this.getLists();
			},


			handleMode(index) {
				this.modeIndex = index;
			},
	



			handleExhibitionCheckbox(id) {
				this.zsList.forEach((item, index) => {
					item.child.forEach((i, k) => {
						if (id == i.id) {
							i.is_delete = i.is_delete == 1 ? 0 : 1;
						}
					})
				})
			},


			
		}
	}
</script>

<style>
	.swiper_box {
		position: relative;
		width: 100%;
		height: 184rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper_box .swiper_img {
		position: relative;
		width: 100%;
		height: 184rpx;
	}

	.ex_tags_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 330rpx;
		height: 76rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
	}

	.on.ex_tags_1 {
		color: #fff;
		background: #A90000;
		border-color: #A90000;
	}

	.page_bg_pos_1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		z-index: 1;
	}

	.content_box {
		position: relative;
		padding: 32rpx 30rpx;
		z-index: 2;
	}

	.sw_page_list {
		position: relative;
		display: flex;
		width: 462rpx;
		height: 60rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 8rpx;
	}

	.sw_page_list .item_sw {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		background: #fff;
	}

	.sw_page_list .item_sw.on {
		color: #fff;
		background: #000;
	}

	.sw_page_list .item_sw:nth-child(1) {
		border-radius: 8rpx 0 0 8rpx;
	}

	.sw_page_list .item_sw:nth-child(2) {
		border-radius: 0 8rpx 8rpx 0;
	}

	.ex_card_box {
		position: relative;
		padding: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
	}

	.ex_card_box .card_img {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 252rpx;
		height: 200rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background: #fff;
	}

	.ex_card_box .card_img .img_size {
		position: relative;
	}

	.card_checkbox_pos {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}
</style>